<div class="content-section introduction">
    <div class="feature-intro">
        <h1>DoughnutChart</h1>
        <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
    </div>
    <app-demoActions github="chart/doughnutchart"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card flex justify-content-center">
        <p-chart type="doughnut" [data]="data" [options]="chartOptions" [style]="{'width': '40%'}"></p-chart>
    </div>
</div>

<div class="content-section documentation">


    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/chart/doughnutchart" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-chart type="doughnut" [data]="data" [options]="chartOptions" [style]="&#123;'width': '40%'&#125;"&gt;&lt;/p-chart&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class DoughnutChartDemo &#123;

    data: any;

    chartOptions: any;

    subscription: Subscription;

    config: AppConfig;

    constructor(private configService: AppConfigService) &#123;&#125;

    ngOnInit() &#123;
        this.data = &#123;
            labels: ['A','B','C'],
            datasets: [
                &#123;
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                &#125;
            ]
        &#125;;

        this.config = this.configService.config;
        this.updateChartOptions();
        this.subscription = this.configService.configUpdate$.subscribe(config => &#123;
            this.config = config;
            this.updateChartOptions();
        &#125;);
    &#125;

    updateChartOptions() &#123;
        this.chartOptions = this.config && this.config.dark ? this.getDarkTheme() : this.getLightTheme();
    &#125;

    getLightTheme() &#123;
        return &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#495057'
                    &#125;
                &#125;
            &#125;
        &#125;
    &#125;

    getDarkTheme() &#123;
        return &#123;
            plugins: &#123;
                legend: &#123;
                    labels: &#123;
                        color: '#ebedef'
                    &#125;
                &#125;
            &#125;
        &#125;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
